import { useParams, useNavigate } from "react-router-dom";
import { useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ArrowLeft, Star, Download, Heart, Share2, User, BadgeDollarSign, Edit3, Eye } from "lucide-react";

// 假数据，后续可接入API
const mockTemplates = [
  {
    id: "1",
    title: "Lesson Plan Template",
    description: "A comprehensive lesson plan template for K-12 educators.",
    category: "Planning",
    tags: ["lesson", "plan", "k12"],
    downloadCount: 120,
    content: "This is the full content of the lesson plan template...",
    author: "John Smith",
    rating: 4.8,
    price: 0,
    thumbnail: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop",
    createdAt: "2024-01-15"
  },
  {
    id: "2",
    title: "Project-Based Learning Template",
    description: "Template for designing PBL activities.",
    category: "PBL Case Workshop",
    tags: ["PBL", "project", "activity"],
    downloadCount: 80,
    content: "This is the full content of the PBL template...",
    author: "Jane Doe",
    rating: 4.6,
    price: 10,
    thumbnail: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=800&h=600&fit=crop",
    createdAt: "2024-01-20"
  }
];

const mockPreviewImages = [
  'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=600&fit=crop',
  'https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=800&h=600&fit=crop',
  'https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&h=600&fit=crop',
];

export default function TemplateDetail() {
  const { id } = useParams();
  const navigate = useNavigate();
  const template = mockTemplates.find(t => t.id === id);
  const [currentPreviewIndex, setCurrentPreviewIndex] = useState(0);
  const [isLiked, setIsLiked] = useState(false);

  if (!template) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <h2 className="text-2xl font-bold mb-2">Template Not Found</h2>
          <Button onClick={() => navigate(-1)} variant="outline">
            <ArrowLeft className="w-4 h-4 mr-1" /> Back
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-purple-50">
      {/* Header */}
      <header className="bg-white/80 backdrop-blur-sm border-b border-gray-200 sticky top-0 z-40">
        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
          <div className="flex items-center justify-between">
            <div className="flex items-center space-x-4">
              <Button variant="ghost" onClick={() => navigate(-1)} className="flex items-center gap-2">
                <ArrowLeft className="h-4 w-4" />
                Back
              </Button>
              <h1 className="text-xl font-semibold text-gray-900">{template.title}</h1>
            </div>
            <div className="flex items-center space-x-2">
              <Button variant="outline" size="sm">
                <Share2 className="h-4 w-4 mr-1" />
                Share
              </Button>
              <Button 
                variant="outline" 
                size="sm"
                onClick={() => setIsLiked(!isLiked)}
                className={isLiked ? 'text-red-500' : ''}
              >
                <Heart className={`h-4 w-4 mr-1 ${isLiked ? 'fill-current' : ''}`} />
                Favorite
              </Button>
            </div>
          </div>
        </div>
      </header>
      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Left Column - Preview */}
          <div className="lg:col-span-2 space-y-6">
            {/* Main Preview */}
            <Card className="overflow-hidden bg-white/80 backdrop-blur-sm border-0 shadow-lg">
              <div className="relative">
                <img 
                  src={mockPreviewImages[currentPreviewIndex]} 
                  alt={`Preview ${currentPreviewIndex + 1}`}
                  className="w-full h-96 object-cover"
                />
              </div>
              {/* Thumbnail Navigation */}
              <div className="p-4 flex gap-2 overflow-x-auto">
                {mockPreviewImages.map((img, index) => (
                  <button
                    key={index}
                    onClick={() => setCurrentPreviewIndex(index)}
                    className={`flex-shrink-0 w-20 h-16 rounded-lg overflow-hidden border-2 transition-all ${
                      currentPreviewIndex === index 
                        ? 'border-blue-500 ring-2 ring-blue-200' 
                        : 'border-gray-200 hover:border-gray-300'
                    }`}
                  >
                    <img src={img} alt={`Thumbnail ${index + 1}`} className="w-full h-full object-cover" />
                  </button>
                ))}
              </div>
            </Card>
            {/* Tabs */}
            <Tabs defaultValue="description" className="w-full">
              <TabsList className="grid w-full grid-cols-3 bg-white/80 backdrop-blur-sm">
                <TabsTrigger value="description">Description</TabsTrigger>
                <TabsTrigger value="specs">Specs</TabsTrigger>
                <TabsTrigger value="reviews">Reviews</TabsTrigger>
              </TabsList>
              <TabsContent value="description" className="mt-6">
                <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
                  <CardHeader>
                    <CardTitle>Template Description</CardTitle>
                  </CardHeader>
                  <CardContent className="prose max-w-none">
                    <p className="text-gray-700 leading-relaxed mb-4">
                      {template.description}
                    </p>
                    <p className="text-gray-700 leading-relaxed mb-4">
                      This is a professionally designed template for {template.category} scenarios. It is crafted to ensure a perfect balance of visual appeal and usability.
                    </p>
                    <ul className="list-disc pl-6 space-y-2 text-gray-700">
                      <li>Modern, professional design</li>
                      <li>Complete content structure, ready to use</li>
                      <li>Fully customizable and easy to edit</li>
                      <li>Compatible with mainstream office software and browsers</li>
                    </ul>
                  </CardContent>
                </Card>
              </TabsContent>
              <TabsContent value="specs" className="mt-6">
                <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
                  <CardHeader>
                    <CardTitle>Technical Specs</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                      <div className="space-y-2">
                        <div className="flex justify-between">
                          <span className="text-gray-600">File Format:</span>
                          <span className="font-medium">PPTX / DOCX / HTML</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-gray-600">File Size:</span>
                          <span className="font-medium">~5.2 MB</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-gray-600">Compatibility:</span>
                          <span className="font-medium">Office 2016+, Chrome, Edge</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-gray-600">Language:</span>
                          <span className="font-medium">English</span>
                        </div>
                      </div>
                      <div className="space-y-2">
                        <div className="flex justify-between">
                          <span className="text-gray-600">Pages:</span>
                          <span className="font-medium">25</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-gray-600">Resolution:</span>
                          <span className="font-medium">1920x1080</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-gray-600">Updated:</span>
                          <span className="font-medium">{template.createdAt}</span>
                        </div>
                        <div className="flex justify-between">
                          <span className="text-gray-600">License:</span>
                          <span className="font-medium">Commercial</span>
                        </div>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </TabsContent>
              <TabsContent value="reviews" className="mt-6">
                <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
                  <CardHeader>
                    <CardTitle>User Reviews</CardTitle>
                  </CardHeader>
                  <CardContent>
                    <div className="text-gray-500">No reviews yet.</div>
                  </CardContent>
                </Card>
              </TabsContent>
            </Tabs>
          </div>
          {/* Right Column - Info */}
          <div className="space-y-6">
            <Card className="bg-white/80 backdrop-blur-sm border-0 shadow-lg">
              <CardHeader>
                <div className="flex items-center gap-2 mb-2">
                  <Badge variant="secondary">{template.category}</Badge>
                  <span className="text-xs text-muted-foreground">{template.downloadCount} downloads</span>
                </div>
                <CardTitle>{template.title}</CardTitle>
              </CardHeader>
              <CardContent>
                <div className="mb-4 flex flex-wrap gap-2">
                  {template.tags.map(tag => (
                    <Badge key={tag} variant="outline">{tag}</Badge>
                  ))}
                </div>
                <div className="flex items-center gap-2 mb-2 text-gray-700">
                  <User className="h-4 w-4" />
                  <span>{template.author}</span>
                </div>
                <div className="flex items-center gap-2 mb-2 text-gray-700">
                  <Star className="h-4 w-4 text-yellow-500" />
                  <span>{template.rating}</span>
                </div>
                <div className="flex items-center gap-2 mb-2 text-gray-700">
                  <BadgeDollarSign className="h-4 w-4 text-blue-600" />
                  <span>{template.price === 0 ? 'Free' : `$${template.price}`}</span>
                </div>
                <div className="flex items-center gap-2 mb-2 text-gray-700">
                  <Download className="h-4 w-4" />
                  <span>{template.downloadCount} downloads</span>
                </div>
                <div className="flex items-center gap-2 mb-2 text-gray-700">
                  <Edit3 className="h-4 w-4" />
                  <span>Last updated: {template.createdAt}</span>
                </div>
                <div className="flex gap-2 mt-4">
                  <Button size="sm" variant="secondary">
                    <Eye className="h-4 w-4 mr-1" />
                    Preview
                  </Button>
                  <Button size="sm" className="bg-blue-600 hover:bg-blue-700 text-white">
                    <Download className="h-4 w-4 mr-1" />
                    Download
                  </Button>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </div>
  );
} 